<template>
  <div class="realTimeCabinetContentPage">
    <div
      v-if="props.modelValue.length > 0"
      class="card_item"
      v-for="(item, index) in props.modelValue"
      :key="item.cabinetId"
    >
      <el-card style="max-width: 480px">
        <template #header>
          <div class="card-header">
            <div>{{ item.cabinetName }}</div>
            <div>
              <el-tag :type="item.type === 0 ? 'success' : ''">{{
                cabinet.tags["cabinetType"][item.type]
              }}</el-tag>
            </div>
          </div>
        </template>
        <div class="rightContent">
          <div
            v-for="(deviceItem, deviceIndex) in cabinet.tags['cabinetType'][
              item.type
            ] === '卧式'
              ? state.horizontal
              : state.vertical"
            :key="deviceIndex"
            class="text-item"
          >
            <div>
              {{
                deviceItem.name +
                " " +
                getrightObj(
                  deviceItem.name.toLowerCase(),
                  "objectName",
                  item.type
                ) +
                " : "
              }}
            </div>
            <div class="text-value">
              <div>{{ item[deviceItem.key] }}</div>
              <div>
                {{ deviceItem.unit }}
              </div>
            </div>
          </div>
        </div>
        <template #footer>
          <div class="card-footer">
            <el-tooltip
              class="box-item"
              effect="dark"
              content="详情"
              placement="bottom"
            >
              <el-button class="btn" :icon="Search" @click="toggleInfo(item)"
                >查看</el-button
              >
            </el-tooltip>
          </div>
        </template>
      </el-card>
    </div>
    <div v-else>所选站点暂无数据，请重新选择站点</div>
  </div>
</template>
<script lang="ts" setup>
import _ from "lodash";
import { onMounted, reactive, inject } from "vue";
import { Search } from "@element-plus/icons-vue";
import { useRoute, useRouter } from "vue-router";

const route = useRoute();
const router = useRouter();
const cabinet = inject("cabinet") as any;
const itemObject = inject("itemObject") as any;

const state: {
  horizontal: anyObj[]; //卧式字段
  vertical: anyObj[]; //立式字段
} = reactive({
  horizontal: [
    {
      icon: "001@2x",
      name: "T1",
      unit: "°C",
      value: "0.0",
      key: "t1",
    },
    {
      icon: "001@2x",
      name: "T2",
      unit: "°C",
      value: "0.0",
      key: "t2",
    },
    {
      icon: "001@2x",
      name: "T3",
      unit: "°C",
      value: "0.0",
      key: "t3",
    },
    {
      icon: "003@2x",
      name: "Q1",
      unit: "L/min",
      value: "0.0",
      key: "q1",
    },
    {
      icon: "004@2x",
      name: "H1",
      unit: "mm",
      value: "0.0",
      key: "h1",
    },
  ],
  vertical: [
    {
      icon: "001@2x",
      name: "T3",
      unit: "°C",
      value: "0.0",
      key: "t3",
    },
    {
      icon: "002@2x",
      name: "T4",
      unit: "°C",
      value: "0.0",
      key: "t4",
    },
    {
      icon: "003@2x",
      name: "T5",
      unit: "°C",
      value: "0.0",
      key: "t5",
    },
    {
      icon: "004@2x",
      name: "T6",
      unit: "°C",
      value: "0.0",
      key: "t6",
    },
  ],
});

const getrightObj = (filed: String, property: any, type: any) => {
  let value = _.filter(itemObject.fullData, { mqttFiled: filed });
  console.log("props.modelValue.type", type);
  if (type) {
    return value[0][property];
  } else {
    return value[0]["objectNameVertical"];
  }
};

interface Props {
  modelValue: any;
}
const props = withDefaults(defineProps<Props>(), {
  modelValue: [],
});

//跳转机柜大屏详情
const toggleInfo = (item: any) => {
  router.push({
    path: "/admin/5Gsmall/detail",
    query: { cabinetId: item.cabinetId },
  });
};

onMounted(() => {});
</script>
<style lang="scss" scoped>
.realTimeCabinetContentPage {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  width: 100%;
  .card_item {
    width: 30%;
    margin-left: 10px;
    .card-header {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
    }
    .rightContent {
      width: 60%;
      .text-item {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        padding-top: 10px;
        .text-value {
          width: 20%;
          display: flex;
          flex-direction: row;
          justify-content: space-between;
          align-items: center;
        }
      }
    }
    .card-footer {
      position: relative;
      text-align: right;
    }
  }
}
</style>
